{% extends 'base/base.html' %}
{% load static %}

{% block extra_css %}
    <link href="{% static 'cases/css/cases_home.css' %}" rel="stylesheet">

{% endblock %}


{% block content %}
    <div class="main-container">


        <!-- 保持原始侧边栏结构 -->
        <nav class="nav-sidebar">
            <h3 class="mb-4">
                <i class="bi bi-cloud-fill text-primary me-2"></i>
                用例管理
            </h3>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action active">
                    <i class="bi bi-list-task me-2"></i> 测试用例
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <i class="bi bi-clock-history me-2"></i> 执行记录
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <i class="bi bi-bar-chart-line me-2"></i> 统计分析
                </a>
            </div>
        </nav>

        <!-- 主内容区保持原始结构 -->
        <main class="content-wrapper">


            <!-- 新增的上部容器 -->
            <div class="top-section">

                <div class="filter-section">
                    <!-- 筛选条件 -->
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label>
                                <input type="text" class="form-control" placeholder="搜索用例名称">
                            </label>
                        </div>
                        <div class="col-md-2">
                            <label>
                                <select class="form-select">
                                    <option>全部协议</option>
                                    <option>HTTP</option>
                                    <option>Thrift</option>
                                    <option>SQL</option>
                                </select>
                            </label>
                        </div>
                        <div class="col-md-2">
                            <label>
                                <select class="form-select">
                                    <option>全部状态</option>
                                    <option>成功</option>
                                    <option>失败</option>
                                    <option>进行中</option>
                                </select>
                            </label>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-secondary w-100">
                                <i class="bi bi-funnel me-2"></i>筛选
                            </button>
                        </div>
                    </div>

                    <!-- 操作工具栏移 -->
                    <div class="action-toolbar d-flex gap-3">
                        <button id="delete-selected" class="btn btn-danger">
                            <i class="bi bi-trash me-2"></i>删除选中
                        </button>
                        <a href="{% url 'createCase' %}" class="btn btn-primary">
                            <i class="bi bi-plus-lg me-2"></i>新建用例
                        </a>

                    </div>
                </div>


            </div>


            <div class="bottom-section">
                <!-- 用例列表 -->
                <div class="test-case-list">
                    {% for case in case_list %}
                        <div class="test-case-card p-3 mb-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <!-- 左侧内容 -->
                                <div class="d-flex align-items-center flex-grow-1">
                                    <!-- 选择复选框 -->
                                    <label>
                                        <input type="checkbox"
                                               class="case-checkbox form-check-input me-3"
                                               value="{{ case.id }}"
                                               style="transform: scale(1.2)">
                                    </label>

                                    <!-- 用例基本信息 -->
                                    <div class="flex-grow-1">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="protocol-tag me-2">{{ case.protocol_type|upper }}</span>
                                            <h5 class="mb-0">{{ case.name }}</h5>
                                        </div>

                                        <div class="text-muted small">
                                            <span class="me-3">
                                                <i class="far fa-clock me-1"></i>
                                                {{ case.create_time|date:"Y-m-d H:i" }}
                                            </span>
                                            <span>
                                                <i class="fas fa-user me-1"></i>
                                                YunZhen
{#                                                {{ case.creator.username }}#}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <!-- 右侧操作区 -->
                                <div class="d-flex align-items-center">
                                    <!-- 状态标识 -->
                                    <span class="status-badge me-3 {{ case.status|yesno:'success,danger' }}">
                                        {{ case.status|yesno:"通过,未通过" }}
                                    </span>

                                    <!-- 操作按钮组 -->
                                    <div class="btn-group">
                                        <button class="btn btn-outline-primary btn-sm"
                                                data-case-id="{{ case.id }}">
                                            <i class="fas fa-play me-1"></i>执行
                                        </button>
                                        <a href="{% url 'caseEdit' case.id %}"
                                           class="btn btn-outline-secondary btn-sm">
                                            <i class="fas fa-edit me-1"></i>编辑
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <div class="alert alert-info">暂无测试用例</div>
                    {% endfor %}
                </div>

                <!-- 分页保持原样 -->
                <nav class="mt-4">
                    {% include 'component/pagination.html' %}
                </nav>
            </div>


        </main>
    </div>


{% endblock %}

{% block extra_scripts %}
    <script src="{% static 'cases/js/case_home.js' %}"></script>

{% endblock %}